<template>
  <div>
    <!-- 外呼确认 -->
    <el-dialog
      :visible.sync="is_call_phone"
      width="626px"
      :close-on-click-modal="false"
      class="call_out"
      :close-on-press-escape="true">
      <h3>{{title}}</h3>
      <i class="el-icon-close" @click="close_call_phone"></i>
      <div class="visit_info" v-show="is_call_phone">
        <div class="doctor_info">
          <span class="title" style="margin-top:6px;width: 86px;">医生信息：</span>
          <div class="doctor_detail">
            <div class="doctor">
              <div>
                <img src="../assets/common/doctor.svg" alt="">
                <span>医生：</span>
                <span>{{ doctors_info.doctorName }}</span>
              </div>
              <div>
                <img src="../assets/common/hospital.svg" alt="">
                <span>医院：</span>
                <span>{{ doctors_info.doctorHospital }}</span>
              </div>
            </div>
            <div class="depart">
              <div>
                <img src="../assets/common/department.svg" alt="">
                <span>科室：</span>
                <span>{{ doctors_info.doctorDept }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="product">
          <span class="title">项目名称：</span>
          <el-select v-model="product_id" placeholder="请选择" @change="get_product_recurit">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="concat">
          <span class="title">联系方式：</span>
          <el-select v-model="concat" placeholder="请选择"
                     v-if="doctorContact && doctorContact.length > 1">
            <el-option
              v-for="(item,index) in doctorContact"
              :key="index"
              :label="item | subPhone"
              :value="item">
            </el-option>
          </el-select>
          <span v-else class="single_cancat">{{ concat.toString()| subPhone }}</span>
        </div>
        <div class="product" v-if="title=='拜访登记'">
          <span class="title">拜访时间：</span>
          <el-date-picker
            v-model="visitingTime"
            type="datetime"
            :picker-options="afterTime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="product" v-if="title=='拜访登记'">
          <span class="title">是否接通：</span>
          <el-select v-model="connect" placeholder="请选择">
            <el-option
              v-for="item in connectList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="visit_purpose" ref="visit_purpose">
          <span class="title" style="display:block;width:107px;margin-top:7px;">拜访目的：</span>
          <el-checkbox-group v-model="purposeList">
            <el-checkbox
              v-for="item in visit_purpose"
              :key="item.resourceValue"
              :label="item.resourceItem"
              :disabled="item.disabled"
              v-model="item.checked"
              border>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="visitationRegisterType" type="primary" @click="submitVisitationRegister">拜访登记</el-button>
        <div v-else>
                  <div class="calling" v-if="is_calling">
          <div>
            <span>拨号中...</span>
          </div>
                    <!-- @click="hangUp" -->
          <el-button type="danger" @click="hangUp1()">挂断</el-button>
        </div>
          <!-- @click="call_phone" -->
        <el-button class="call_phone_btn" v-else
                   type="primary"
                   @click="call_phone"
                   :loading="loading">拨打</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 扩招外呼 -->
    <el-dialog
      title="扩招外呼"
      :visible.sync="is_enrolment_call"
      width="626px"
      :close-on-click-modal="false">
      <i class="el-icon-close" @click="close_call_phone"></i>
      <div class="visit_info" v-if="is_enrolment_call">
        <div class="visit_info">
          <div class="doctor_info">
            <span class="title" style="margin-top:6px;width: 84px;">医生信息：</span>
            <div class="doctor_detail">
              <div class="doctor">
                <div>
                  <img src="../assets/common/doctor.svg" alt="">
                  <span>医生：</span>
                  <span>{{ doctors_info.doctorName ? doctors_info.doctorName : '未知' }}</span>
                </div>
                <div>
                  <img src="../assets/common/hospital.svg" alt="">
                  <span>医院：</span>
                  <span>{{ doctors_info.doctorHospital ? doctors_info.doctorHospital : '未知' }}</span>
                </div>
              </div>
              <div class="depart">
                <div>
                  <img src="../assets/common/department.svg" alt="">
                  <span>科室：</span>
                  <span>{{ doctors_info.doctorDept ? doctors_info.doctorDept : '未知' }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="product">
            <span class="title">项目名称：</span>
            <el-select v-model="product_id" placeholder="请选择" @change="get_product_recurit" size="small">
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="concat">
            <span class="title">联系方式：</span>
            <el-select v-model="concat" placeholder="请选择"
                       v-if="doctors_info.doctorContact && doctors_info.doctorContact.length > 1">
              <el-option
                v-for="(item,index) in doctors_info.doctorContact"
                :key="index"
                :label="item | subPhone"
                :value="index">
              </el-option>
            </el-select>
            <span v-else class="single_cancat">{{ concat | subPhone }}</span>
          </div>
          <div class="visit_purpose">
            <span class="title" style="display:block;width:107px;margin-top:9px;">拜访目的：</span>
            <el-checkbox-group v-model="purposeList">
              <el-checkbox
                v-for="item in visit_purpose"
                :key="item.resourceValue"
                :label="item.resourceItem"
                :disabled="item.disabled"
                v-model="item.checked"
                border>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-if="enrollmentExpansion">
            <div class="visit_purpose" style="transform: translateX(-7px);">
            <span class="title" style="width:79px;margin-top:9px;">
              <span class="visited_mandatory_logo">*</span>拜访结果：</span>
              <el-checkbox-group v-model="visitObjective" size="small">
                <el-checkbox v-for="item in visitObjectiveList"
                             :label="item"
                             :key="item.resourceValue"
                             border>
                  {{ item.resourceItem }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="concat" style="transform: translateX(-7px);">
            <span class="title">
              <span class="visited_mandatory_logo">*</span>医生态度：</span>
              <el-rate v-model="attitude"></el-rate>
            </div>
            <div class="concat" style="transform: translateX(-7px);">
            <span class="title">
              <span class="visited_mandatory_logo">*</span>是否有AE：</span>
              <el-select v-model="isAe" placeholder="请选择" size="small">
                <el-option
                  v-for="item in isAeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="concat">
              <span class="title">下次拜访时间：</span>
              <el-date-picker
                size="small"
                v-model="next_call_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                :picker-options="expireTimeOption">
              </el-date-picker>
            </div>
            <div class="concat remark enrollment_remark">
              <span class="title" style="width: 81px;margin-top: -63px;">备注：</span>
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                maxlength="200"
                show-word-limit
                v-model="remark1">
              </el-input>
            </div>
          </div>

          <div v-if="doctorInformation">
            <!-- <div class="concat"><h3>添加医生信息</h3></div> -->
            <div class="concat" style="transform: translateX(-7px);">
            <span class="title" style="width: 91px;">
              <span class="visited_mandatory_logo">*</span>医生姓名：</span>
              <el-input placeholder="请输入内容" size="small" v-model="doctorName"></el-input>
            </div>
            <div class="concat" style="transform: translateX(-7px);">
            <span class="title" style="width: 90px;">
              <span class="visited_mandatory_logo">*</span>电话：</span>
              <el-input placeholder="请输入内容" size="small" v-model="doctorTelephone"></el-input>
            </div>
            <div class="concat whereHospital" style="transform: translateX(-7px);">
            <span class="title" style="width: 79px;">
              <span class="visited_mandatory_logo">*</span>所在医院：</span>
              <el-select v-model="doctorHospital" value-key="id" placeholder="请选择" filterable size="small">
                <el-option
                  style="width: 400px"
                  v-for="item in doctorHospitalList"
                  :key="item.id"
                  :label="item.hospitalName"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="concat" style="transform: translateX(-7px);">
            <span class="title" style="width: 79px;">
              <span class="visited_mandatory_logo">*</span>所在科室：</span>
              <el-select v-model="doctorDepartment" placeholder="请选择" filterable size="small">
                <el-option
                  v-for="item in doctorDepartmentList"
                  :label="item.resourceItem"
                  :value="item.resourceItem">
                </el-option>
              </el-select>
            </div>
            <div class="concat">
              <span class="title" style="width: 70px;padding-left: 2px;">职务：</span>
              <el-select v-model="doctorTitle" placeholder="请选择" size="small">
                <el-option
                  v-for="item in doctorTitleList"
                  :key="item.resourceValue"
                  :label="item.resourceItem"
                  :value="item.resourceItem">
                </el-option>
              </el-select>
            </div>
            <div class="concat">
              <span class="title" style="width: 70px;padding-left: 2px;">职称：</span>
              <el-select v-model="doctorPost" placeholder="请选择" size="small">
                <el-option
                  v-for="item in doctorPostList"
                  :key="item.resourceValue"
                  :label="item.resourceItem"
                  :value="item.resourceItem">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="dialog enrollment_dialog">
            <div class="call_timer">
              <span class="time">{{ str }}</span>
            </div>
            <el-button type="primary" v-if="dial" :loading="loading"
                       @click="makeAcall()">拨打
            </el-button>
            <el-button v-if="hang_up" type="danger" @click="hangUp()" class="hang_up">挂断</el-button>
            <el-button v-if="hang_up_button" type="primary" @click="preservation()" class="submit">保存</el-button>

          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 未接通 -->
    <el-dialog
      :visible.sync="is_deal_promit"
      width="526px"
      :close-on-click-modal="false">
      <h3>{{call_out_title}}</h3>
      <i class="el-icon-close" @click="close_not_call"></i>
      <div class="visit_info">
        <div class="visit_purpose">
          <span class="title" style="width: 92px;margin-top:7px;">通话结束：</span>
          <el-radio-group v-model="hangUpReason" size="small">
            <el-radio
              v-for="item in hang_up_reason" :label="item" border>
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </div>
        <div class="concat remark">
          <span class="title" style="width: 90px;margin-top: -63px;">备注：</span>
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入备注信息"
            v-model="remark"
            maxlength="200"
            show-word-limit>
          </el-input>
        </div>
        <div class="dialog">
          <el-button type="primary" @click="add_call_record">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {api, baseAjax, decryptMobile} from '../api/api';
import Cookies from 'js-cookie';
import {statusCode, subPhone} from '../utils/index';
import {mapState, mapMutations} from "vuex";
import {formatDate} from '../utils/validate';
import bus from '../assets/js/eventBus';
import Cookie from "js-cookie";
import {httpForm} from "@/api/http";

export default {
  computed: {
    ...mapState({
      'loading': state => state.calls.loading,
      'is_deal_promit': state => state.calls.is_deal_promit,
      'is_calling': state => state.calls.is_calling,  //是否显示呼叫中弹框
      'sinToken': state => state.calls.sinToken,
      'doctor_id': state => state.calls.doctorId,
      //接通显示拜访结果
      'enrollmentExpansion': state => state.calls.enrollmentExpansion,
      //是否系统挂断
      'systemHangUp': state => state.calls.systemHangUp,
    })
  },
  data() {
    return {
      //外呼确认
      title: '',
      call_out_title:'未接通',   //未接通弹框标题

      is_call_phone: false,
      is_enrolment_call: false,
      productList: [],  //产品
      purposeList: [],   //选中拜访目的
      visit_purpose: [],  //拜访目的列表
      product_id: '',   //产品id
      concatList: [],   //联系方式
      concat: '',  //选中的联系方式
      doctors_info: {},
      recurit_status: null,   //产品对应招募状态
      hangUpReason: '',
      hang_up_reason: [
        {
          id: '1',
          name: '关机'
        }, {
          id: '2',
          name: '拒绝'
        }, {
          id: '3',
          name: '空号/错号'
        }, {
          id: '4',
          name: '忙音'
        }, {
          id: '5',
          name: '停机'
        }, {
          id: '6',
          name: '无人接听'
        }
      ],
      //未接通备注
      remark: '',
      //拜访结果
      visitObjective: [],
      visitObjectiveList: [],
      //医生态度
      attitude: 0,
      //是否有AE
      isAe: '',
      isAeList: [
        {
          value: -1,
          label: '未知'
        },
        {
          value: 1,
          label: '是'
        },
        {
          value: 2,
          label: '否'
        },
      ],
      //下次拜访时间
      next_call_time: '',
      //设置不能选当前日期之前的日期
      expireTimeOption: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
        selectableRange: ['09:00:00 - 18:00:00']
      },
      //设置当日之后的日期不可选择
      afterTime: {
        disabledDate(datetime) {
          return datetime.getTime() > Date.now();
        }
      },
      //接通备注
      remark1: '',
      //添加医生信息
      doctorInformation: false,
      //医生姓名
      doctorName: '',
      //电话
      doctorTelephone: '',
      //所在医院
      doctorHospital: '',
      doctorHospitalList: [],
      //所在科室
      doctorDepartment: '',
      doctorDepartmentList: [],
      //职称
      doctorTitle: '',
      doctorTitleList: [],
      //职务
      doctorPost: '',
      doctorPostList: [],

      dial: true,//拨打
      hang_up: false,//挂断
      hang_up_button: false,//保存

      callStatus: '',
      //拜访登记
      visitationRegisterType: false,
      visitingTime: '',
      //是否接通
      connect: '',
      connectList: [
        {
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        },
      ],

      h: 0,//定义时，分，秒，毫秒并初始化为0；
      m: 0,
      ms: 0,
      s: 0,
      time: 0,
      str: '00:00:00',
      timer1: null,
      phone: "",

      enrollment: '',
      call_source_type: null,
      //手机号
      doctorContact: []
    }
  },
  watch: {
    visitObjective() {
      if (this.visitObjective.length >= 1) {
        let list = []
        this.visitObjective.map((res) => {
          list.push(res.resourceValue)
        })
        if (list.includes('6')) {
          this.doctorInformation = true
          this.callStatus = 1
        } else {
          this.doctorInformation = false
          this.callStatus = 0
          this.doctorName = ''
          this.doctorTelephone = ''
          this.doctorHospital = ''
          this.doctorDepartment = ''
          this.doctorTitle = ''
          this.doctorPost = ''
        }
      } else {
        this.doctorInformation = false
        this.callStatus = 0
        this.doctorName = ''
        this.doctorTelephone = ''
        this.doctorHospital = ''
        this.doctorDepartment = ''
        this.doctorTitle = ''
        this.doctorPost = ''
      }
    },
    systemHangUp() {
      if (this.systemHangUp == true) {
        this.timeStop()
        this.dial = false;
        this.hang_up = false;
        this.hang_up_button = true;
      }
    }
  },
  mounted() {
    this.title = ''
    this.visitingTime = ''
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
    this.visit_Result();
  },
  created() {
    let that = this;
    bus.$on('getDoctorDetail', (res) => {
      this.doctors_info = {};
      this.doctorContact = [];
      this.visitationRegisterType = false
      if (res.hasOwnProperty('type') == true) {
        this.visitationRegisterType = true
        this.title = '拜访登记'
      }
      if (res.hasOwnProperty('type') == false) {
        this.title = '外呼确认'
      }
      that.doctors_info = res;
      if(that.doctors_info.doctorContact){
        that.doctors_info.doctorContact.forEach(item => {
          decryptMobile(item).then((res) => {
            if (res.data.code === statusCode.success) {
              this.doctorContact.push(res.data.data)
            }
          })
        })
      }
      that.concat = this.doctorContact;
      that.getProductList();
    });
    bus.$on('getDoctorPhone', (res) => {
      this.phone = res;
      that.concat = res ? subPhone(res) : '';
      that.getProductList();
    });
    bus.$on('isPhoneCall', (res) => {
      that.is_call_phone = res;
    });
    //修改未接通弹框头部标题
    bus.$on('callOutTitle',(res)=>{
      that.call_out_title = res;
    });
  },
  methods: {
    ...mapMutations({
      phone_call: 'calls/callPhone',
      hang: 'calls/hang'
    }),
    //获取产品
    getProductList() {
      let that = this;
      let doctor_id = this.doctors_info.doctorId ? this.doctors_info.doctorId : 0;
      api.get_product_by_id = {
        url: api.get_product_by_id_url + this.user_info.repId + '/' + doctor_id,
        method: api.get_product_by_id.method
      }
      baseAjax(api.get_product_by_id, '', (res) => {
        if (res.code === statusCode.success) {
          that.productList = res.data;
          that.product_id = that.productList.length ? that.productList[0].name : '';
          that.get_product_recurit();
        }
      });
    },
    //获取产品对应招募状态
    get_product_recurit() {
      let that = this;
      let productId = null;
      let doctor_id = null;
      if (!isNaN(this.product_id)) {
        productId = this.product_id;
      } else {
        this.productList.forEach(item => {
          if (that.product_id === item.name) {
            productId = item.id;
          }
        });
      }
      doctor_id = this.doctors_info.doctorId ? this.doctors_info.doctorId : 0;
      api.get_product_recruit_status = {
        url: api.get_product_recruit_status_url + '?doctorId=' + doctor_id + '&productId=' + productId,
        method: api.get_product_recruit_status.method
      }
      baseAjax(api.get_product_recruit_status, '', (res) => {
        if (res.code === statusCode.success) {
          that.recurit_status = res.data;
          that.get_purpose_list();
        }
      });
    },
    //获取拜访目的
    get_purpose_list() {
      if (this.$refs.visit_purpose && this.$refs.visit_purpose.children[1].children.length) {
        if (this.recurit_status === 1) {
          this.$refs.visit_purpose.children[1].children[0].className = 'el-checkbox is-disabled is-bordered';
          this.$refs.visit_purpose.children[1].children[0].children[0].className = 'el-checkbox__input is-disabled';
        } else {
          this.$refs.visit_purpose.children[1].children[0].className = 'el-checkbox is-disabled is-bordered is-checked';
          this.$refs.visit_purpose.children[1].children[0].children[0].className = 'el-checkbox__input is-disabled is-checked';
        }
      }
      let that = this;
      api.get_resource_item = {
        url: api.get_resource_item_url + 'purpose_type',
        method: api.get_resource_item.method
      }
      baseAjax(api.get_resource_item, '', (res) => {
        if (res.code === statusCode.success) {
          that.visit_purpose = res.data;
          that.visit_purpose.forEach(item => {
            item.disabled = true;
            item.checked = false;
          });
          let purposeList = [];
          //未招募
          if (that.recurit_status === 0 || that.recurit_status === null) {
            that.visit_purpose[0].checked = true;
            purposeList.push(that.visit_purpose[0].resourceItem);
            that.purposeList = purposeList;
          } else if (that.recurit_status === 1) {  //已招募
            that.visit_purpose.forEach(item => {
              item.disabled = false;
              item.checked = true;
            });
            that.visit_purpose[0].disabled = true;
            that.visit_purpose[0].checked = false;
          } else {
            that.visit_purpose[0].checked = true;
            purposeList.push(that.visit_purpose[0].resourceItem);
            that.purposeList = purposeList;
          }
        }
      });
    },
    ///resource/getReourceItem/{resource_name}
    visit_Result() {
      //拜访结果result_type_a
      let getReourceItem_result_type_a = {
        url: '/resource/getReourceItem/result_type_a',
        method: 'GET'
      }
      baseAjax(getReourceItem_result_type_a, '', (res) => {
        if (res.code === statusCode.success) {
          this.visitObjectiveList = res.data
        }
      });
      //获取所有医院信息 /hospital/getAllHospitalInfo
      let getAllHospitalInfo = {
        url: '/hospital/getAllHospitalInfo',
        method: 'POST'
      }
      baseAjax(getAllHospitalInfo, '', (res) => {
        if (res.code === statusCode.success) {
          this.doctorHospitalList = res.data
        }
      });
      //科室 depart
      let getReourceItem_depart = {
        url: '/resource/getReourceItem/depart ',
        method: 'GET'
      }
      baseAjax(getReourceItem_depart, '', (res) => {
        if (res.code === statusCode.success) {
          this.doctorDepartmentList = res.data
        }
      });
      //职称 tech_title
      let getReourceItem_tech_title = {
        url: '/resource/getReourceItem/tech_title ',
        method: 'GET'
      }
      baseAjax(getReourceItem_tech_title, '', (res) => {
        if (res.code === statusCode.success) {
          this.doctorTitleList = res.data
        }
      });
      //职务 execute_title
      let getReourceItem_execute_title = {
        url: '/resource/getReourceItem/execute_title ',
        method: 'GET'
      }
      baseAjax(getReourceItem_execute_title, '', (res) => {
        if (res.code === statusCode.success) {
          this.doctorPostList = res.data
        }
      });
    },
    //makeAcall
    makeAcall() {
      let productId = null;
      let projectName = '';
      this.productList.forEach(item => {
        if (this.product_id === item.name) {
          productId = item.id;
          projectName = item.name;
        }
      });
      let visit_record_info = {
        project_id: productId,
        projectName: projectName,
      };
      Cookies.set('visit_record_info', this.EncryUtil.encryptByAES(JSON.stringify(visit_record_info)), {expires: 24 * 60 * 60 * 1000});
      this.timers(2, productId, visit_record_info)
      this.$store.state.calls.type = 2;
      this.phone_call(this.phone);
      this.timeStart()
      this.dial = false;
      this.hang_up = true;
      this.hang_up_button = false;
    },
    timer() {   //定义计时函数
      this.ms = this.ms + 50;         //毫秒
      if (this.ms >= 1000) {
        this.ms = 0;
        this.s = this.s + 1;         //秒
      }
      if (this.s >= 60) {
        this.s = 0;
        this.m = this.m + 1;        //分钟
      }
      if (this.m >= 60) {
        this.m = 0;
        this.h = this.h + 1;        //小时
      }
      this.str = this.toDub(this.h) + ":" + this.toDub(this.m) + ":" + this.toDub(this.s) + ""
    },
    //时间重置
    timeReset() {
      clearInterval(this.time);
      this.h = 0;
      this.m = 0;
      this.ms = 0;
      this.s = 0;
      this.str = "00:00:00";
    },
    //时间开始
    timeStart() {
      this.time = setInterval(this.timer, 50);
    },
    //时间暂停
    timeStop() {
      clearInterval(this.time);
    },
    //时间补0操作
    toDub(n) {
      if (n < 10) {
        return "0" + n;
      } else {
        return "" + n;
      }
    },
    //拜访登记
    submitVisitationRegister() {
      if (!this.product_id) {
        this.$alert('请选择"项目"');
      } else if (!this.visitingTime) {
        this.$alert('请选择"拜访时间"');
      }else if (!this.connect) {
        this.$alert('请选择"是否接通"');
      } else if (!this.purposeList.length) {
        this.$alert('请选择"拜访目的"');
      } else {
        if (this.connect == '否') {
          let productId = null;
          let projectName = '';
          let purpose = [];
          if (!isNaN(this.product_id)) {
            productId = this.product_id;
          } else {
            this.productList.forEach(item => {
              if (this.product_id === item.name) {
                productId = item.id;
                projectName = item.name;
              }
            });
          }
          this.purposeList.forEach(item => {
            this.visit_purpose.forEach(val => {
              if (item === val.resourceItem) {
                purpose.push(val);
              }
            });
          });
          let visit_record_info = {
            project_id: productId,
            projectName: projectName,
            purpose: purpose,
            recurit_status: this.recurit_status,
            type: '拜访登记',
            callDateTime: formatDate(this.visitingTime),
          };
          Cookie.set('visit_record_info', this.EncryUtil.encryptByAES(JSON.stringify(visit_record_info)), {expires: 24 * 60 * 60 * 1000});
          this.call_source_type = 1;
          this.is_call_phone = false;
          this.$store.state.calls.is_deal_promit = true;
        } else {
          let productId = null;
          let projectName = '';
          let purpose = [];
          if (!isNaN(this.product_id)) {
            productId = this.product_id;
          } else {
            this.productList.forEach(item => {
              if (this.product_id === item.name) {
                productId = item.id;
                projectName = item.name;
              }
            });
          }
          this.purposeList.forEach(item => {
            this.visit_purpose.forEach(val => {
              if (item === val.resourceItem) {
                purpose.push(val);
              }
            });
          });
          let visit_record_info = {
            project_id: productId,
            projectName: projectName,
            purpose: purpose,
            recurit_status: this.recurit_status,
            type: '拜访登记',
            callDateTime: formatDate(this.visitingTime),
          };
          Cookie.set('visit_record_info', this.EncryUtil.encryptByAES(JSON.stringify(visit_record_info)), {expires: 24 * 60 * 60 * 1000});
          Cookie.set('supplement', false, {expires: 24 * 60 * 60 * 1000});
          this.$router.push('/calling');
        }
      }
    },
    //挂断
    hangUp() {
      this.timeStop()
      this.hangUp1()
      this.dial = false;
      this.hang_up = false;
      this.hang_up_button = true;
    },
    hangUp1() {
      this.hang();
      this.is_call_phone = false;
    },
    //保存
    preservation() {
      let productId = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('visit_record_info')));
      let data = {
        "attitude": this.attitude,
        "callRecordPurpose": [],
        "callRecordResult": [],
        "doctorId": '',
        "doctorPlusBean": {
          "techTitle": this.doctorPost,
          "depart": this.doctorDepartment,
          "doctorContact": this.doctorTelephone,
          "doctorName": this.doctorName,
          "hospitalId": this.doctorHospital.id,
          "hospitalName": this.doctorHospital.hospitalName,
          "executeTitle": this.doctorTitle
        },
        "memo": this.remark1,
        "nextCallTime": this.next_call_time,
        "repId": this.user_info.repId,
        "repName": this.user_info.name,
        "repType": this.user_info.type,
        "sinToken": this.sinToken,
        "withAe": this.isAe,
        "productId": productId.project_id,
        "productName": this.product_id,
        "callStatusDesc": '接通',
        'callStatus': 1,
        "isRecruit": this.callStatus,
      }
      this.productList.forEach(item => {
        if (item.name == this.product_id) {
          data.callRecordPurpose.push({
            id: item.id,
            purposeVal: item.name
          })
        }
      });
      this.visitObjective.map((res) => {
        data.callRecordResult.push({
          id: res.resourceValue,
          resultVal: res.resourceItem
        })
      })
      if (data.callRecordResult.length >= 1) {
        if (data.attitude >= 1) {
          if (data.withAe) {
            //扩展外呼信息录入/call_record_info/addExtendOutboundInfo
            let addExtendOutboundInfo = {
              url: '/call_record_info/addExtendOutboundInfo',
              method: 'POST'
            }
            if (this.doctorInformation == false) {
              console.log(JSON.stringify(data))
              baseAjax(addExtendOutboundInfo, data, (res) => {
                if (res.code === statusCode.success) {
                  console.log(res)
                  this.is_enrolment_call = false
                  this.$message.success('添加成功！');

                  this.visitObjective = []
                  this.attitude = ''
                  this.isAe = ''
                  this.next_call_time = ''
                  this.remark1 = ''
                  this.doctorName = ''
                  this.doctorTelephone = ''
                  this.doctorHospital = ''
                  this.doctorDepartment = ''
                  this.doctorTitle = ''
                  this.doctorPost = ''

                }
              })
            }
            if (this.doctorInformation == true) {
              if (data.doctorPlusBean.doctorName) {
                if (/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(data.doctorPlusBean.doctorContact)) {
                  if (data.doctorPlusBean.hospitalName) {
                    if (data.doctorPlusBean.depart) {
                      console.log(JSON.stringify(data))
                      baseAjax(addExtendOutboundInfo, data, (res) => {
                        if (res.code === statusCode.success) {
                          console.log(res)
                          this.is_enrolment_call = false
                          this.$message.success('添加成功！');

                          this.visitObjective = []
                          this.attitude = ''
                          this.isAe = ''
                          this.next_call_time = ''
                          this.remark1 = ''
                          this.doctorName = ''
                          this.doctorTelephone = ''
                          this.doctorHospital = ''
                          this.doctorDepartment = ''
                          this.doctorTitle = ''
                          this.doctorPost = ''
                        }
                      })
                    } else {
                      this.$message.warning('请选择"科室"');
                    }
                  } else {
                    this.$message.warning('请选择"医院"');
                  }
                } else {
                  this.$message.warning('电话格式不正确！');
                }
              } else {
                this.$message.warning('请填写"医生姓名"');
              }
            }
          } else {
            this.$message.warning('请选择"AE"');
          }
        } else {
          this.$message.warning('请选择"医生态度"');
        }
      } else {
        this.$message.warning('请选择"拜访结果"');
      }
    },
    //列表-拨打电话
    call_phone() {
      if (!this.product_id) {
        this.$alert('请选择"项目"');
      } else if (!this.doctors_info.doctorContact) {
        this.$alert('医生没有联系方式');
      } else if (!this.concat) {
        this.$alert('请选择"联系方式"');
      } else if (!this.purposeList.length) {
        this.$alert('请选择"拜访目的"');
      } else {
        let that = this;
        let productId = null;
        let projectName = '';
        let purpose = [];
        if (!isNaN(this.product_id)) {
          productId = this.product_id;
        } else {
          this.productList.forEach(item => {
            if (that.product_id === item.name) {
              productId = item.id;
              projectName = item.name;
            }
          });
        }
        this.purposeList.forEach(item => {
          that.visit_purpose.forEach(val => {
            if (item === val.resourceItem) {
              purpose.push(val);
            }
          });
        });
        let visit_record_info = {
          project_id: productId,
          projectName: projectName,
          purpose: purpose,
          recurit_status: this.recurit_status
        };
        Cookies.set('supplement', false, {expires: 24 * 60 * 60 * 1000});
        this.timers(1, productId, visit_record_info)
        this.$store.state.calls.type = 1;
        this.phone_call(this.concat.toString());
        this.$store.state.calls.is_calling = true;
        this.$store.state.calls.loading = true;
        // 本地测试跳转至通话页，测试功能
        // this.$router.push('/calling');
      }
    },
    //添加拜访结果拜访信息
    visitRecordInfo(info) {
      info.sinToken = this.sinToken;
      Cookies.set('visit_record_info', this.EncryUtil.encryptByAES(JSON.stringify(info)), {expires: 24 * 60 * 60 * 1000});
    },
    timers(type, productId, visit_record_info) {
      this.timer1 = setInterval(() => {
        if (this.sinToken != '') {
          this.visitRecordInfo(visit_record_info);
          this.call_source(type, productId);
          this.clearTimer();
        }
      }, 1000)
    },
    clearTimer() {//清除定时器
      clearInterval(this.timer1);
      this.timer1 = null;
    },
    //区分通话来源
    call_source(type, productId) {
      this.call_source_type = type;
      //拜访目的
      let data = {
        callSource: type,
        doctorId: this.doctors_info.doctorId,
        productId: productId,
        repId: this.user_info.repId,
        sinToken: this.sinToken,
        sysStatus: "1"
      };
      baseAjax(api.call_source, data, (res) => {
        if (res.code === statusCode) {
          this.clearTimer();
          return true;
        }
      });
    },
    //列表-拨打电话
    is_phone_call() {
      this.is_call_phone = true;
    },
    enrolment_call() {
      this.is_enrolment_call = true;
    },
    //关闭外呼弹框，扩招外呼弹框
    close_call_phone() {
      //拨号中，挂断电话
      if (this.is_calling) {
        this.hangUp1()
      }

      this.title = ''

      this.purposeList = []

      this.is_call_phone = false;
      this.is_enrolment_call = false;
      this.doctors_info = {};

      this.$store.state.calls.enrollmentExpansion = false;
      this.dial = true;
      this.hang_up = false;
      this.hang_up_button = false;
      this.timeReset()

      this.visitObjective = []
      this.attitude = ''
      this.isAe = ''
      this.next_call_time = ''
      this.remark1 = ''
      this.doctorName = ''
      this.doctorTelephone = ''
      this.doctorHospital = ''
      this.doctorDepartment = ''
      this.doctorTitle = ''
      this.doctorPost = ''

    },
    //关闭未接通弹框
    close_not_call() {
      this.$store.state.calls.is_deal_promit = false;
      this.hangUpReason = '';
      this.remark = '';
    },
    //未接通
    add_call_record() {
      this.dial = true;
      this.hang_up = false;
      this.hang_up_button = false;
      this.timeReset()
      let productId = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('visit_record_info')));
      let doctorId = null;
      if (this.call_source_type == 1) {  //列表拨打电话
        doctorId = this.doctors_info.doctorId;
      }
      let data = {
        repId: this.user_info.repId,
        productId: productId.project_id,
        doctorId: doctorId ? doctorId : productId.doctorId,
        sinToken: this.sinToken ? this.sinToken : productId.sinToken,
        callStatusDesc: this.hangUpReason.name,
        memo: this.remark,
      }
      if (productId.type == '拜访登记') {
        data.callDateTime = productId.callDateTime
        data.sinToken = ''
      }
      console.log(data)
      baseAjax(api.add_call_record, data, (res) => {
        if (res.code === statusCode.success) {
          if (res.data == true) {
            this.$store.state.calls.is_deal_promit = false;
            this.is_enrolment_call = false
            this.is_call_phone = false;
            this.hangUpReason = '';
            this.remark = '';
            this.call_source_type = null
            bus.$emit('resetVisitRecord', productId);
          }
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
  /deep/.el-input.el-input--suffix.is-focus>.el-input__inner{
    border-color:#2A82E2;
  }
  /deep/.el-input__inner:focus{
    border-color:#2A82E2 !important;
  }
  /deep/.el-range-editor.is-active{
    border-color:#2A82E2 !important;
  }
  /deep/.el-textarea__inner:focus{
    border-color:#2A82E2 !important;
  }
.hang_up {
  .reason {
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 22px;

    .reason_title {
      font-size: 14px;
      font-weight: 400;
      color: #2B3A4F;
      margin-right: 11px;
    }

    .el-radio-group {
      /deep/ .el-radio {
        margin-right: 19px;
        height: 32px;
        border-radius: 5px;
        border: 1px solid #E6EDFE;
        position: relative;
        padding: 7px 32px;

        .el-radio__input {
          position: absolute;
          right: 0px;
          bottom: -2px;

          .el-radio__inner {
            border-color: transparent;
            background-color: transparent;
            position: relative;
          }

          .el-radio__inner::after {
            width: 10px;
            height: 6px;
            border: 1px solid #fff;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg);
            vertical-align: baseline;
            background-color: transparent;
            border-radius: 0;
            position: absolute;
            left: -2px;
            top: 0;
          }
        }

        .el-radio__input.is-checked .el-radio__inner {
          border: 10px solid transparent;
          border-right: 10px solid #3B7CFF;
          border-bottom: 10px solid #3B7CFF;
          border-bottom-left-radius: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 4px;
        }

        .el-radio__input.is-checked + .el-radio__label {
          color: #3B7CFF;
        }

        .el-radio__label {
          padding-left: 0;
          text-align: center;
        }
      }

      .el-radio.is-checked {
        border-color: #3B7CFF;
      }
    }
  }

  .reamrk {
    display: flex;
    margin-bottom: 49px;

    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2B3A4F;
      display: block;
      width: 45px;
    }

    .el-textarea {
      .el-textarea__inner {
        width: 611px;
        height: 168px;
        border-radius: 5px;
        border: 1px solid #E6EDFE;
        resize: none;
        transform: translateX(39px);
      }
    }
  }
}

.call_out {
  .el-dialog {
    height: 600px !important;
  }
}

.el-dialog__wrapper {
  /deep/ .el-dialog {
    background-color: #FFFFFF;
    border-radius: 4px;
    position: relative;
    font-family: PingFangSC-Medium, PingFang SC;
    margin-top:22vh;

    .el-dialog__header {
      padding: 18px 0px 0 32px;

      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #202020;
      }

      .el-dialog__headerbtn {
        display: none;
      }
    }

    .el-dialog__header::after {
      content: '';
      width: 10px;
      height: 5px;
      border: 2px solid white;
      border-top: transparent;
      border-right: transparent;
      left: -1px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }

    .el-dialog__body {
      padding: 28px 25px 0 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      h3{
        position:absolute;
        top:19px;
        margin:0;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #202020;
      }

      .el-icon-close {
        font-size: 20px;
        position: absolute;
        top: 18px;
        right: 21px;
      }

      .visit_info {
        .visit_purpose, .doctor_info, .product, .concat {
          display: flex;
          margin-bottom: 16px;

          .title {
            font-size: 14px;
            font-weight: 400;
          }
        }

        .product, .concat {
          display: flex;
          align-items: center;
          .el-select{
            .el-input{
              .el-input__inner{
                width: 200px;
                height: 32px;
                border-radius: 2px;
                border: 1px solid #DDDFE6;
              }
              .el-input__suffix{
                .el-input__suffix-inner{
                  .el-input__icon{
                    line-height:32px;
                  }
                }
              }
            }
          }
          .el-input{
            .el-input__inner{
              width: 200px;
              height: 32px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height:32px;
                }
              }
            }
          }
          .el-date-editor{
            .el-input__inner{
              width: 200px;
              height: 32px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
            .el-input__prefix{
              .el-input__icon{
                line-height:32px;
              }
            }
            .el-input__suffix{
              right:23px;
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height:32px;
                }
              }
            }
          }
          .single_cancat{
            width: 200px;
            height: 32px;
            background-color: #F7F8FA;
            border-radius: 2px;
            border: 1px solid #DDDFE6;
            display:flex;
            align-items:center;
            padding-left:14px;
            box-sizing:border-box;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C0C4CC;
          }
        }

        .visit_purpose {
          margin-bottom: 0px;

          .el-checkbox-group {
            .el-checkbox {
              position: relative;
              margin-bottom: 10px;
              margin-right: 12px;

              .el-checkbox__input {
                position: absolute;
                right: 0;
                bottom: -3px;

                .el-checkbox__inner {
                  border-color: transparent;
                  background-color: transparent;
                }

                .el-checkbox__inner::after {
                  width: 6px;
                  height: 10px;
                  left: -1px;
                  top: -2px;
                }
              }

              .el-checkbox__input.is-checked .el-checkbox__inner {
                display:none;
                border: 10px solid transparent;
                border-right: 10px solid #409EFF;
                border-bottom: 10px solid #409EFF;
                border-bottom-left-radius: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 4px;
                width: 0;
                background-color: transparent;
              }

              .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #fff;
              }

              .el-checkbox__label {
                transform: translateY(-4px);
                font-size: 14px;
                font-weight: 400;
                padding-left:0;
                font-family: PingFangSC-Regular, PingFang SC;
                color: #666666;
              }
            }

            .el-checkbox.is-bordered {
              height: 32px;
              padding: 9px 14px 7px 14px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
              box-sizing:border-box;
            }

            .el-checkbox.is-bordered:hover>.el-checkbox__label{
              color: #2A82E2;
            }

            .el-checkbox.is-bordered + .el-checkbox.is-bordered {
              margin-left: 0;
            }

            .el-checkbox.is-bordered.is-checked {
              border-color: transparent;
              background-color:#2A82E2;
            }

            .el-checkbox.is-bordered.is-checked:hover>.el-checkbox__label{
              color:#fff;
            }

            .el-checkbox.is-bordered + .el-checkbox.is-bordered {
              margin-left: 0;
            }

            .el-checkbox.is-disabled.is-bordered{
              background-color: rgba(240, 242, 245, 0.6);
            }

            .el-checkbox.is-disabled.is-bordered>.el-checkbox__label{
              color: #C0C4CC;
            }

            .el-checkbox.is-disabled.is-bordered.is-checked{
              background-color: #2A82E2;
            }
            .el-checkbox.is-disabled.is-bordered.is-checked>.el-checkbox__label{
              color:#fff;
            }
          }

          .el-radio-group{
            margin-bottom:6px;
            .el-radio {
              position: relative;
              margin-bottom: 10px;
              margin-right: 12px;
              height: 32px;
              border-radius: 2px;
              border: 1px solid #DDDFE6;

              .el-radio__input {
                position: absolute;
                right: 0;
                bottom: -3px;

                .el-radio__inner {
                  border-color: transparent;
                  background-color: transparent;
                }

                .el-radio__inner::after {
                  content: '';
                  width: 10px;
                  height: 2px;
                  border: 2px solid white;
                  border-top: transparent;
                  border-right: transparent;
                  left: -1px;
                  -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
                  border-radius: 0px;
                  background: none;
                }
              }

              .el-radio__input.is-checked .el-radio__inner {
                display:none;
                border: 10px solid transparent;
                border-right: 10px solid #3B7CFF;
                border-bottom: 10px solid #3B7CFF;
                border-bottom-left-radius: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 4px;
                width: 0;
                background-color: transparent;
              }

              .el-radio__input.is-checked + .el-radio__label {
                color: #fff;
              }

              .el-radio__label {
                transform: translateY(-4px);
                font-size: 14px;
                font-weight: 400;
                padding:0;
                font-family: PingFangSC-Regular, PingFang SC;
                color: #666666;
                line-height:32px;
              }
            }

            .el-radio.is-bordered+.el-radio.is-bordered{
              margin-left:0;
            }

            .el-radio--small.is-bordered{
              padding:0px 14px;
            }

            .el-radio.is-bordered.is-checked{
              background-color: #2A82E2;
              border-color:transparent;
            }

            .el-radio.is-bordered.is-checked:hover>.el-radio__label{
              color:#fff;
            }

            .el-radio.is-bordered:hover>.el-radio__label{
              color:#2A82E2;
            }
          }
        }

        .doctor_info {
          margin-top: -6px;

          .doctor_detail {
            width: 100%;
            font-size: 14px;
            font-weight: 400;
            background-color: rgba(240, 242, 245, 0.5);
            border-radius: 4px;
            padding: 17px 0 19px 22px;
            margin-right:20px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #333333;
            box-sizing:border-box;
            display:flex;
            .doctor{
              margin-right:48px;
              div{
                display:flex;
                align-items:center;
              }
              div:first-child{
                margin-bottom:11px;
              }
            }
            .doctor,.depart{
              div{
                display:flex;
                align-items:center;
              }
              img{
                margin-right:7px;
              }
            }

            // div {
            //   margin-bottom: 18px;
            // }
          }
        }

        .remark{
          .el-textarea{
            .el-textarea__inner{
              resize:none;
              width: 362px;
              height: 100px;
              background-color: #FFFFFF;
              border-radius: 2px;
              border: 1px solid #DDDFE6;
            }
            .el-input__count{
              right:38px;
            }
          }
        }

        .enrollment_remark{
          padding-left: 3px;
          box-sizing:border-box;
          .el-textarea{
            .el-input__count{
              right:144px;
            }
          }
        }
      }
    }

    .el-dialog__footer {
      display: flex;
      justify-content: center;
      padding-bottom: 32px;
      padding-top:30px;

      .dialog-footer {
        .el-button {
          height: 32px;
          background-color: #2A82E2;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
          border-color:transparent;
          padding:0 25px;
          box-sizing:border-box;
        }
        .el-button:hover{
          background-color: rgba(42, 130, 226, 0.7);
        }
        .el-button:active{
          background-color: #1F6DC3;;
        }

        .calling {
          div:first-child {
            text-align: center;
            margin-bottom: 6px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.3);
          }
          .el-button{
            padding-right:20px;
            background-color: #F13333;
            background-image:url('../assets/common/hang_out.svg');
            background-repeat:no-repeat;
            background-position:16px 12px;
            span{
              margin-left:16px;
            }
          }
        }

        .call_phone_btn{
          padding:0 17px;
          box-sizing:border-box;
          background-image:url('../assets/common/call.svg');
          background-repeat:no-repeat;
          background-position:17px 9px;
          span{
            margin-left:18px;
          }
        }
      }
    }
  }
}

.el-dialog__wrapper:nth-child(3) {
  z-index: 10000000 !important;
}

.visited_mandatory_logo {
  color: #F65C44;
  margin-right:2px;
  display:inline-block;
  transform: translateY(3px);
}

.dialog {
  display:flex;
  justify-content:center;
  text-align: center;
  padding-bottom:32px;
  margin-top:40px;

  .el-button {
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    height: 32px;
    background-color: #2A82E2;
    border-radius: 2px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 36px;
    border-color:transparent;
  }

  .el-button:hover{
    background-color: rgba(42, 130, 226, 0.7);
  }

  .el-button:active{
    background-color: #1F6DC3;;
  }

  span {
    font-size: 20px;
  }
}

.enrollment_dialog{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  .call_timer{
    margin-bottom:5px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .el-button{
    padding:0 23px 0 39px;
    background-image:url('../assets/common/call.svg');
    background-repeat:no-repeat;
    background-position:20px 10px;
    span{
      margin-left:12px;
    }
  }
  .hang_up{
    background-color: #F13333;
    background-image:url('../assets/common/hang_out.svg');
    background-repeat:no-repeat;
    background-position:14px 12px;
    padding:0 19px 0 38px;
  }
}
</style>
